<template>
  <div class="notification-container">
    <el-badge :value="notifications.length" :max="99" v-if="notifications.length > 0">
      <el-button 
        type="primary" 
        :icon="Bell" 
        circle 
        @click="showNotifications"
        class="notification-btn"
      />
    </el-badge>
    <el-button 
      v-else
      type="primary" 
      :icon="Bell" 
      circle 
      @click="showNotifications"
      class="notification-btn"
    />
    
    <el-drawer
      v-model="drawerVisible"
      title="系统通知"
      direction="rtl"
      size="400px"
    >
      <div class="notification-list">
        <div 
          v-for="(notification, index) in notifications" 
          :key="index"
          class="notification-item"
          :class="{ unread: !notification.read }"
          @click="markAsRead(notification)"
        >
          <div class="notification-icon">
            <el-icon :color="getNotificationColor(notification.type)">
              <component :is="getNotificationIcon(notification.type)" />
            </el-icon>
          </div>
          <div class="notification-content">
            <div class="notification-title">{{ notification.title }}</div>
            <div class="notification-message">{{ notification.message }}</div>
            <div class="notification-time">{{ formatTime(notification.time) }}</div>
          </div>
          <div class="notification-status">
            <el-tag 
              v-if="!notification.read" 
              type="danger" 
              size="small"
              effect="dark"
            >
              未读
            </el-tag>
          </div>
        </div>
        <div v-if="notifications.length === 0" class="empty-notifications">
          <el-empty description="暂无通知" :image-size="80" />
        </div>
      </div>
      
      <template #footer>
        <div class="notification-footer">
          <el-button @click="markAllAsRead" :disabled="unreadCount === 0">
            全部标记为已读
          </el-button>
          <el-button type="danger" @click="clearAll" :disabled="notifications.length === 0">
            清空所有
          </el-button>
        </div>
      </template>
    </el-drawer>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { ElMessage } from 'element-plus'
import { 
  Bell, Document, Star, Search, Upload, Download, Delete, Warning, SuccessFilled, InfoFilled 
} from '@element-plus/icons-vue'

// 响应式数据
const drawerVisible = ref(false)
const notifications = ref([
  {
    id: 1,
    title: '文献上传成功',
    message: '您上传的文献《深度学习在医学图像中的应用》已成功处理',
    type: 'success',
    time: '2023-05-15 14:30:22',
    read: false
  },
  {
    type: 'info',
    time: '2023-05-14 09:15:45',
    read: false
  },
  {
    id: 3,
    title: '系统维护通知',
    message: '系统将于今晚02:00-04:00进行维护，届时服务可能中断',
    type: 'warning',
    time: '2023-05-13 16:42:18',
    read: true
  }
])

// 计算属性
const unreadCount = computed(() => {
  return notifications.value.filter(n => !n.read).length
})

// 方法
const showNotifications = () => {
  drawerVisible.value = true
}

const markAsRead = (notification: any) => {
  notification.read = true
  ElMessage.success('已标记为已读')
}

const markAllAsRead = () => {
  notifications.value.forEach(n => n.read = true)
  ElMessage.success('全部标记为已读')
}

const clearAll = () => {
  notifications.value = []
  ElMessage.success('已清空所有通知')
}

const getNotificationIcon = (type: string) => {
  const icons: Record<string, any> = {
    success: SuccessFilled,
    warning: Warning,
    info: InfoFilled,
    document: Document,
    favorite: Star,
    search: Search,
    upload: Upload,
    download: Download,
    delete: Delete
  }
  return icons[type] || InfoFilled
}

const getNotificationColor = (type: string) => {
  const colors: Record<string, string> = {
    success: '#67c23a',
    warning: '#e6a23c',
    info: '#409eff',
    document: '#409eff',
    favorite: '#67c23a',
    search: '#e6a23c',
    upload: '#409eff',
    download: '#409eff',
    delete: '#f56c6c'
  }
  return colors[type] || '#409eff'
}

const formatTime = (timeStr: string) => {
  return new Date(timeStr).toLocaleString('zh-CN')
}
</script>

<style scoped>
.notification-container {
  position: relative;
}

.notification-btn {
  position: relative;
  z-index: 1000;
}

.notification-list {
  height: calc(100% - 60px);
  overflow-y: auto;
}

.notification-item {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: background-color 0.3s;
}

.notification-item:hover {
  background-color: #f5f7fa;
}

.notification-item.unread {
  background-color: #f0f9ff;
}

.notification-icon {
  margin-right: 15px;
  flex-shrink: 0;
}

.notification-content {
  flex: 1;
}

.notification-title {
  font-weight: 500;
  color: #303133;
  margin-bottom: 5px;
}

.notification-message {
  color: #606266;
  font-size: 14px;
  margin-bottom: 5px;
  line-height: 1.4;
}

.notification-time {
  color: #909399;
  font-size: 12px;
}

.notification-status {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.empty-notifications {
  padding: 40px 0;
  text-align: center;
}

.notification-footer {
  display: flex;
  justify-content: space-between;
}
</style>